<template>
  <div>
    <page-list :x-uri="uri" :x-tabs="tabs" tree :doactions="doactions" :custom-components="custom" :checkbox-item="false" />
    <sort-dialog :value.sync="sortValue" :visible.sync="visible" :disable-submit="disableSubmit" @submit="onSubmit" />
    <el-dialog title="请输入功能分组名称" :visible.sync="dialogVisible" width="400px" :close-on-click-modal="false" top="30vh">
      <el-form v-if="dialogVisible" ref="group" :model="group" size="small">
        <el-form-item prop="title" :rules="rulesTtitle"><edu-input :value.sync="group.title" :args="{ minlength: 2, maxlength: 30 }" /></el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" :disabled="disableSubmit" @click="updatedCategoryTitle">保存</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import Status from './components/status';
import Icon from './components/icon';
import EduInput from '@public/form/input.vue';
import SortDialog from '@/components/update-sort-dialog';

export default {
  components: {
    PageList,
    EduInput,
    SortDialog
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/admin/site/personal/items/wap',
      tabs: [
        {
          title: '个人中心菜单',
          uri: '/site/personal/items_wap',
          meta: {
            permission: 'site.pc.personal.menu'
          }
        }
      ],
      custom: {
        status: Status,
        icon: Icon
      },
      doactions: [
        {
          title: '排序',
          meta: { permission: 'site.pc.personal.menu.sort' },
          callback: this.sortPopover
          // display({ row }) {
          //   return !row.gid
          // }
        },
        {
          title: '编辑',
          meta: { permission: 'site.pc.personal.menu.edit' },
          callback: this.edit
          // display({ row }) {
          //   return !row.children
          // }
        }
      ],
      isGroup: 0,
      itemId: 0,
      visible: false,
      sortValue: 1, // 排序值
      disableSubmit: false,
      group: {
        id: undefined,
        title: ''
      },
      dialogVisible: false,
      rulesTtitle: [
        { required: true, message: '分组名称必须填写', trigger: ['blur', 'change'] },
        {
          pattern: /^.{2,30}$/,
          message: '分组名称为2-30个字符',
          trigger: ['blur', 'change']
        }
      ]
    };
  },
  methods: {
    edit: function({ row }) {
      if (row.gid) {
        // 编辑功能分组名称
        this.group.id = row.gid;
        this.group.title = row.title;
        this.dialogVisible = true;
      } else {
        this.$router.push({ path: '/site/personal/items/' + row.id + '/edit/wap' });
      }
    },
    // 排序弹出层
    sortPopover({ row }) {
      this.visible = true;
      this.isGroup = !!row.children;
      this.itemId = this.isGroup ? row.gid : row.id;
      this.sortValue = row.sort;
    },
    // 保存
    onSubmit() {
      this.disableSubmit = true;
      console.log(this.isGroup, this.itemId);
      const uri = this.isGroup ? '/admin/site/personal/group/' + this.itemId + '/sort' : '/admin/site/personal/items/' + this.itemId + '/sort';
      this.$http.put(uri, {
        sort: this.sortValue
      }, ({ msg }) => {
        this.$message.success(msg);
        this.disableSubmit = false;
        this.visible = false;
        this.reload();
      }, ({ msg }) => {
        this.$message.error(msg)
        this.disableSubmit = false;
      }, false)
    },
    // 更新分组名称
    updatedCategoryTitle() {
      this.disableSubmit = true;
      this.$http.put(
        '/admin/site/personal/group/' + this.group.id + '/title',
        {
          title: this.group.title
        },
        ({ msg }) => {
          this.$message.success(msg);
          this.disableSubmit = false;
          this.dialogVisible = false;
          this.reload();
        },
        ({ msg }) => {
          this.$message.error(msg);
          this.disableSubmit = false;
        },
        false
      );
    }
  }
};
</script>
